<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>基础JAVAscript</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<script>
			window.onload = function() {
				var oDiv1 = document.getElementById('div1');
				var aIpt1 = oDiv1.getElementsByTagName('input');
				var aBtn1 = oDiv1.getElementsByTagName('button');
				aBtn1[0].onclick = function() {
					alert(parseFloat(aIpt1[0].value) + parseFloat(aIpt1[1].value))
				}
				aBtn1[1].onclick = function() {
					alert(aIpt1[2].value - aIpt1[3].value)
				}
				aBtn1[2].onclick = function() {
					alert(aIpt1[4].value * aIpt1[5].value)
				}
				aBtn1[3].onclick = function() {
					alert(aIpt1[6].value / aIpt1[7].value)
				}
				aBtn1[4].onclick = function() {
					alert(aIpt1[8].value % aIpt1[9].value)
				}

				var oDiv2 = document.getElementById('div2');
				var aBtn2 = oDiv2.getElementsByTagName('button')[0];
				var aLi2 = oDiv2.getElementsByTagName('li');
				aBtn2.onclick = function() {
					for(var i = 0; i < aLi2.length; i += 1) {
						if(i % 2 == 0) {
							aLi2[i].style.background = 'yellow';
						}
					}
				}

				var oDiv3 = document.getElementById('div3');
				var aIpt3 = oDiv3.getElementsByTagName('input')[0];
				var aBtn3 = oDiv3.getElementsByTagName('button')[0];
				aBtn3.onclick = function() {
					alert(parseInt(aIpt3.value / 60) + '分' + (aIpt3.value % 60) + '秒')
				}

				var oDiv4 = document.getElementById('div4');
				var aIpt4 = oDiv4.getElementsByTagName('input')[0];
				var aBtn4 = oDiv4.getElementsByTagName('button')[0];
				aBtn4.onclick = function() {
						if(aIpt4.value == '' || isNaN(aIpt4.value)) {
							alert('必须输入数字');
						} else if(aIpt4.value > 9 && aIpt4.value < 100) {
							alert('是两位数');
						} else {
							alert('不是两位数');
						}
					}
					/*
						var oDiv1=document.getElementById('div1');
						var oDiv1aDiv1=oDiv1.getElementsByTagName('div')[0];
						var aDiv1aIpt1=oDiv1aDiv1.getElementsByTagName('input')[0];
						var aDiv1aIpt2=oDiv1aDiv1.getElementsByTagName('input')[1];
						var aDiv1aBtn1=oDiv1aDiv1.getElementsByTagName('button')[0];
						aDiv1aBtn1.onclick=function ()
						{
							var i1=parseFloat(aDiv1aIpt1.value);
							var i2=parseFloat(aDiv1aIpt2.value);
							if(isNaN(i1))
							{
								alert('请检查第一个输入框的内容是否为数字')
							}
							else if(isNaN(i2))
							{
								alert('请检查第二个输入框的内容是否为数字')
							}
							else
							{
								alert(i1+i2)
							}
						}
						var oDiv1aDiv2=oDiv1.getElementsByTagName('div')[1];
						var aDiv2aIpt1=oDiv1aDiv2.getElementsByTagName('input')[0];
						var aDiv2aIpt2=oDiv1aDiv2.getElementsByTagName('input')[1];
						var aDiv2aBtn1=oDiv1aDiv2.getElementsByTagName('button')[0];
						aDiv2aBtn1.onclick=function ()
						{
							var i1=parseFloat(aDiv2aIpt1.value);
							var i2=parseFloat(aDiv2aIpt2.value);
							if(isNaN(i1))
							{
								alert('请检查第一个输入框的内容是否为数字')
							}
							else if(isNaN(i2))
							{
								alert('请检查第二个输入框的内容是否为数字')
							}
							else
							{
								alert(i1-i2)
							}
						}
						
						var oDiv1aDiv3=oDiv1.getElementsByTagName('div')[2];
						var aDiv3aIpt1=oDiv1aDiv3.getElementsByTagName('input')[0];
						var aDiv3aIpt2=oDiv1aDiv3.getElementsByTagName('input')[1];
						var aDiv3aBtn1=oDiv1aDiv3.getElementsByTagName('button')[0];
						aDiv3aBtn1.onclick=function ()
						{
							var i1=parseFloat(aDiv3aIpt1.value);
							var i2=parseFloat(aDiv3aIpt2.value);
							if(isNaN(i1))
							{
								alert('请检查第一个输入框的内容是否为数字');
							}
							else if(isNaN(i2))
							{
								alert('请检查第二个输入框的内容是否为数字');
							}
							else
							{
								alert(i1*i2);
							}
						}
						var oDiv1aDiv4=oDiv1.getElementsByTagName('div')[3];
						var aDiv4aIpt1=oDiv1aDiv4.getElementsByTagName('input')[0];
						var aDiv4aIpt2=oDiv1aDiv4.getElementsByTagName('input')[1];
						var aDiv4aBtn1=oDiv1aDiv4.getElementsByTagName('button')[0];
						aDiv4aBtn1.onclick=function ()
						{
							var i1=parseFloat(aDiv4aIpt1.value);
							var i2=parseFloat(aDiv4aIpt2.value);
							if(isNaN(i1))
							{
								alert('请检查第一个输入框的内容是否为数字');
							}
							else if(isNaN(i2))
							{
								alert('请检查第二个输入框的内容是否为数字');
							}
							else
							{
								alert(i1/i2);
							}
						}
						var oDiv1aDiv5=oDiv1.getElementsByTagName('div')[4];
						var aDiv5aIpt1=oDiv1aDiv5.getElementsByTagName('input')[0];
						var aDiv5aIpt2=oDiv1aDiv5.getElementsByTagName('input')[1];
						var aDiv5aBtn1=oDiv1aDiv5.getElementsByTagName('button')[0];
						aDiv5aBtn1.onclick=function ()
						{
							var i1=parseFloat(aDiv5aIpt1.value);
							var i2=parseFloat(aDiv5aIpt2.value);
							if(isNaN(i1))
							{
								alert('请检查第一个输入框的内容是否为数字');
							}
							else if(isNaN(i2))
							{
								alert('请检查第二个输入框的内容是否为数字');
							}
							else
							{
								alert(i1%i2);
							}
						}
					//....................................................................................
						var oDiv2=document.getElementById('div2');
						var oDiv2aLi=oDiv2.getElementsByTagName('li');
						var oDiv2aBtn1=oDiv2.getElementsByTagName('button')[0];
						oDiv2aBtn1.onclick=function ()
						{
							if(oDiv2aLi[0].className=='list-group-item')
							{
								for(var i=0;i<oDiv2aLi.length;i++)
								{
									if(i%2==0)
									{
										oDiv2aLi[i].className='list-group-item active'
									}
									else
									{
										oDiv2aLi[i].className='list-group-item list-group-item-info'
									}
								}
								oDiv2aBtn1.innerHTML='清除变色';
							}
							else
							{
								for(var i=0;i<oDiv2aLi.length;i++)
									{
										oDiv2aLi[i].className='list-group-item';
									}
								oDiv2aBtn1.innerHTML='执行变色';
							}
						}
					//....................................................................................
						var oDiv3=document.getElementById('div3');
						var oDiv3aIpt1=oDiv3.getElementsByTagName('input')[0];
						var oDiv3aBtn1=oDiv3.getElementsByTagName('button')[0];
						oDiv3aBtn1.onclick=function ()
						{
							var i1=oDiv3aIpt1.value;
							if(isNaN(i1)||i1=="")
							{
								alert('请确定输入的内容为纯数字')
							}
							else
							{
								alert(parseInt(i1/600)+'小时'+parseInt(i1/60)+'分钟'+i1%60+'秒')
							}
						}
					*/
			}
		</script>
	</head>

	<BODY>
		<pre><h1>基础JAVAscript</a></h1></pre>
		<div id="div1" class="box box-re">
			1、算术练习<br><br>
			<div class="box box-re form-inline">
				例1：求和<br>
				<input type="text" class="form-control" /> 加 <input type="text" class="form-control" /> <button class="btn btn-info">求和</button>
			</div>
			<div class="box box-re form-inline">
				例2：求差<br>
				<input type="text" class="form-control" /> 减 <input type="text" class="form-control" /> <button class="btn btn-info">求差</button>
			</div>
			<div class="box box-re form-inline">
				例3：求积<br>
				<input type="text" class="form-control" /> 乘 <input type="text" class="form-control" /> <button class="btn btn-info">求积</button>
			</div>
			<div class="box box-re form-inline">
				例4：求商<br>
				<input type="text" class="form-control" /> 除 <input type="text" class="form-control" /> <button class="btn btn-info">求商</button>
			</div>
			<div class="box box-re form-inline">
				例5：求模<br>
				<input type="text" class="form-control" /> 模 <input type="text" class="form-control" /> <button class="btn btn-info">求模</button>
			</div>
		</div>
		<div id="div2" class="box box-re">
			2、取模应用于隔行换色<br><br> 虽然现在需要实现这个应用只要通过CSS3的选择器进行偶数选择即可，但学习的进程还是要遵循的。
			<br> 实现不管有多少个li，偶数li和奇数li使用不同背景颜色。分析：获取所有li，做一个li的for循环，再进行判断当前这个li模上2等于0的时候执行变深蓝色，不等于0的时候执行变浅蓝色。
			<button class="btn btn-info">执行变色</button><br><br>
			<ul class="list-group">
				<li class="list-group-item">隔行变色</li>
				<li class="list-group-item">隔行变色</li>
				<li class="list-group-item">隔行变色</li>
				<li class="list-group-item">隔行变色</li>
				<li class="list-group-item">隔行变色</li>
			</ul>
		</div>
		<div id="div3" class="box box-re">
			3、求商取模应用于秒转时间<br><br> 分析：不管输入框获取到的数字是多少，都执行除60取分钟，除600取小时，最后取模为秒数。通过parseInt取整数。
			<br><br>
			<div class="box box-re form-inline">
				<input type="text" class="form-control" placeholder="单位(秒)" /> <button class="btn btn-info">秒转时间</button><br>
			</div>
		</div>

		<div id="div4" class="box box-re">
			4、判断是否为两位数<br><br> 分析：输入数字大于9且小于100为两位数。
			<br><br>
			<div class="box box-re form-inline">
				<input type="text" class="form-control" placeholder="请输入数字" /> <button class="btn btn-info">判断</button><br>
			</div>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p><b>算术：</b>+加、-减、*乘、/除、%取模（求余数、求模）就是整除之后出来的余数。</p>
			<p><b>赋值：</b>=、+=（i+=1和i=i+1和i++是一个意思，都是加1，但是如果想一次加3，就不能用i++了，只能i=i+3或i+=3）、-=（减等）、*=（乘等）、/=（除等）、%=（模等）</p>
			<p><b>关系：</b>
				<、>、
					<=、>=、==（双等-先转换再比较）、===（三等-不转换直接比）、!=（不等）、!==
						<（不等等）</p>
							<p><b>逻辑：</b>&&与（并且）、||或、!否（调换真假）</p>
							<p><b>运算符优先级：</b>括号</p>
		</div>

	</BODY>

</HTML>